<template>
	<view class="home-page">
		<u-navbar title="我的" :is-back="false" title-color="#000" back-icon-color="#000"
			:back-text-style="{color: '#000'}" :border-bottom="false"
			:background="{background: '#FFCC4B'}"></u-navbar>
		<view class="no-login flex-center justify-start px-40" v-if="!hasUserInfo" @tap="gotoLoginPage">
			<view class="d-flex flex-column justify-space-between align-start text-box">
				<view class="title font-36">未登录</view>
				<view class="tip font-30">请点击登录</view>
			</view>
		</view>
		<view v-if="hasUserInfo" class="p-rela d-flex flex-column justify-start align-center user-info-box ">
			<view class="p-rela d-flex flex-column justify-center align-start mb-20 user-info-card">
				<view class="p-rela d-flex px-62 py-20 user-info">
					<image src="@/static/images/default_head.png" class="mr-26 avatar"></image>
					<view class="d-flex flex-column justify-center user">
						<view class="font-32 font-bold mb-6">{{userInfo.realName}}</view>
						<view class="font-24">{{userInfo.phoneNumber}}</view>
					</view>
				</view>
			</view>
			<view class="d-flex justify-space-between align-center mb-50 px-30 company" @click="switchCompany">
				<view class="d-flex align-center font-28 name"><image src="@/static/images/change_company.png" class="mr-20" style="width: 56rpx;height: 58rpx;"></image>{{deptName}}</view>
				<view class="d-flex justify-center align-center change-company">
					切换<image src="@/static/images/change_scenic.png" class="ml-6"></image>
				</view>
			</view>
		</view>
		<view v-if="hasUserInfo" class="d-flex justify-space-between align-center flex-wrap func-box pt-50 px-30">
			<view class="func-card">
				<view class="flex-center justify-space-between mt-20 mx-40 action-item" @click="record">
					<view class="flex-center title">
						<image src="../../../static/images/my_record.png" class="mr-20" style="width: 34rpx;height: 40rpx;"></image>
						<view class="font-28 name">核销记录</view>
					</view>
					<u-icon name="arrow-right" color="#B2B2B2" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="hasUserInfo" class="logout-box">
			<u-button shape='circle' type="error" @click="logout">退出登录</u-button>
		</view>
		
	</view>
</template>

<script>
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				userInfo: null,
				hasUserInfo: false,
				deptName: "请选择机构",
				deptId: '',
				scenicInfo: null,
			};
		},
		methods: {
			gotoLoginPage() {
				uni.navigateTo({
					url: '/pages/my-sub/login/login'
				})
			},
			switchCompany() {
				uni.navigateTo({
					url: `../../home-sub/choose-company/choose-company`,
				});
			},
			switchScenic() {
				uni.navigateTo({
					url: `../../home-sub/choose-scenic/choose-scenic`,
				});
			},
			// 核销记录
			record() {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
					return false
				}
				if (!this.deptId) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-company/choose-company'
					})
					return false
				}
				if (!this.scenicInfo) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-scenic/choose-scenic'
					})
					return false
				}
				uni.navigateTo({
					url: `../../home-sub/sale-record/sale-record`,
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `退出将导致功能无法使用, 确定退出?`,
					confirmColor: '#FA3534',
					success: function (res) {
						if (res.confirm) {
							storage.removeUserInfo();
							storage.removeAccessToken();
							uni.clearStorage()
							uni.navigateTo({
								url: '/pages/my-sub/login/login',
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}
		},
		async onShow() {
			
			let userInfo = this.$store.getters.getUserInfo;
			if (userInfo) {
				this.userInfo = userInfo
				this.hasUserInfo = true;
				this.deptName = uni.getStorageSync('deptName') || '请选择机构'
				this.deptId = uni.getStorageSync('deptId') || ''
				this.scenicInfo = uni.getStorageSync('scenicInfo') || null
			} else {
				this.userInfo = null
				this.deptName = '请选择机构'
				this.deptId = ''
				this.scenicInfo = null
				this.hasUserInfo = false
				uni.clearStorageSync()
			}

		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}
</style>
<style lang="scss" scoped>
	.home-page {
		.no-login {
			width: 95%;
			height: 200rpx;
			border-radius: 20rpx;
			margin: 40rpx auto;
			box-sizing: border-box;
			z-index: 3;
			background: #FFCC4B;
		
			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 28rpx;
			}
		
			.text-box {
				height: 86rpx;
				.title {
					font-family: Source Han Sans CN;
					font-weight: 500;
					line-height: 1;
					color: #333;
				}
		
				.tip {
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333;
					line-height: 1;
				}
			}
		}
		.user-info-box {
			background: linear-gradient(to bottom, #FFCC4B, #FFFFFF);
			width: 750rpx;
			height: 540rpx;
			.user-info-card {
				width: 100%;
				.user-info {
					width: 750rpx;
					box-sizing: border-box;
	
					.avatar {
						width: 118rpx;
						height: 118rpx;
						z-index: 2;
					}
	
					.user {
						color: #000;
						z-index: 2;
					}
				}
	
			}
	
			.company {
				
				width: 690rpx;
				height: 88rpx;
				background-color: #F4C233;
				z-index: 2;
				box-sizing: border-box;
				border-radius: 20rpx;
				.name {
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000;
				}
	
				.change-company {
					width: 106rpx;
					height: 52rpx;
					background-color: #fff;
					border-radius: 6rpx;
					color: #000;
					flex-shrink: 0;
					image {
						width: 25rpx;
						height: 23rpx;
					}
				}
			}
		}
	
		.func-box {
			background-color: #eee;
			border-radius: 30rpx 30rpx 0 0;
			position: absolute;
			bottom: 200rpx;
			left: 0;
			right: 0;
			top: 530rpx;
			.func-card {
				background-color: #fff;
				border-radius: 10rpx;
				position: absolute;
				top: -40rpx;
				bottom: 30rpx;
				width: 690rpx;
				.action-item {
					height: 88rpx;
					background-color: #fff;
					border-bottom: 1px solid #e5e5e5;
					.title {
						.name {
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333;
						}
					}
				}
			}
		}
		.logout-box {
			position: fixed;
			bottom: 50rpx;
			width: 690rpx;
			margin-left: 30rpx;
		}
	}
	
</style>